<template>
  <div class="map-container" id="map" ref="rootmap">
    <div class="mapbutton">
      <button class="loginout" @click="loginout">退出登录</button>
      <button @click="othermap">其他地图</button>
      <button class="weixintu" type="button" @click="change_img">
        谷歌卫星地图
      </button>
      <button class="daolutu" type="button" @click="change_vec">
        谷歌道路地图
      </button>
    </div>
    <div class="data">
      经度：
      <input v-model="data.jingdu" type="text" />
      <br />维度：
      <input v-model="data.weidu" type="text" />
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View, Coordinate } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from "ol/proj";
import { toStringHDMS, format } from "ol/coordinate";
import Overlay from "ol/Overlay";
import { transform, toLonLat } from "ol/proj";
import MousePosition from "ol/control/MousePosition.js";
import WMTS from "ol/source/WMTS";

//计算面积

export default {
  name: "app",
  data() {
    return {
      data: {
        jingdu: "00° 00′ 00″",
        weidu: "00° 00′ 00″",
      },
      map: null,
      overlay: null,
      mapip: "http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}",
    };
  },

  methods: {
    loginout() {
      this.$router.push("/login");
    },
    othermap() {
      this.$router.push("/newmap");
    },
    change_img() {
      this.mapip =
        "http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}";

      this.initMap();
      this.addPopup();
      var deleconvas = document.getElementsByClassName("ol-viewport");
      deleconvas[0].remove();
    },
    change_vec() {
      this.mapip =
        "http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0";

      this.initMap();
      this.addPopup();
      var deleconvas = document.getElementsByClassName("ol-viewport");
      deleconvas[0].remove();
    },
    /**
     * 初始化一个 openlayers 地图
     */
    initMap() {
      let target = "map"; //跟页面元素的 id 绑定来进行渲染
      let tileLayer = [
        new TileLayer({
          opacity: 0.7,
          source: new XYZ({
            url: this.mapip,
          }),
        }),
      ];
      let view = new View({
        // projection: "EPSG:4326",
        center: fromLonLat([108.957739, 34.342966]), //兰州地图中心坐标
        zoom: 4.5, //缩放级别
      });
      this.map = new Map({
        target: target, //绑定dom元素进行渲染
        layers: tileLayer, //配置地图数据源
        view: view, //配置地图显示的options配置（坐标系，中心点，缩放级别等）
      });
    },
    // 获取经纬度
    addPopup() {
      let _that = this;
      this.map.on("pointermove", function(evt) {
        // 点击尺 （这里是尺(米)，并不是经纬度）;
        let hdms = toStringHDMS(toLonLat(evt.coordinate)); // 转换为经纬度显示
        _that.data.jingdu = hdms.substring(0, 11);
        _that.data.weidu = hdms.substring(15, 26);
      });
    },
    // 空间测量
    measureFun(option) {
      switch (option) {
        case "坐标测量":
          Measure.measure(this.map, "Point");
          break;
        case "距离测量":
          Measure.measure(this.map, "LineString");
          break;
        case "面积测量":
          Measure.measure(this.map, "Polygon");
          break;
      }
    },
  },
  mounted() {
    this.initMap();
    this.addPopup();
    this.measureFun();
  },
};
</script>

<style>
.map-container {
  width: 100%;
  height: 100vh;
}
.mapbutton {
  position: fixed;
  margin-left: 40px;
  margin-top: 12px;
  z-index: 999;
}
button {
  height: 50px;
  width: 100px;
  border-radius: 6px;
}

.data {
  position: fixed;
  height: 50px;
  width: 180px;
  background-color: #cccccc;
  left: 50%;
  top: 90%;
  transform: translate(-50%, 0);
  text-align: center;
  z-index: 888;
}
input {
  width: 90px;
}
#map {
  height: 100%;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
  display: none;
}
.ol-rotate-reset {
  display: none;
}
</style>
